<template>
  <div class="app-container">
    <div class="filter-container">
      <router-link to="/main/xingzheng/gdzichanbq/gdzichanbq">
        <el-button type="primary">返回</el-button>
      </router-link>
      <el-button style="margin-left: 10px" type="primary" @click="handleAdd">新增</el-button>
    </div>
<div>
  <h2>
    固定资产标签列表
  </h2>
</div>
    <!-- 添加筛选输入框 -->
    <div class="filter-inputs">
      <el-input v-model="filter.labelNo" placeholder="筛选标签编号"></el-input>
      <el-input v-model="filter.assetName" placeholder="筛选资产名称"></el-input>
      <el-input v-model="filter.assetNumber" placeholder="筛选资产编号"></el-input>
      <el-input v-model="filter.applicationUnit" placeholder="筛选申请单位"></el-input>
      <el-input v-model="filter.custodian" placeholder="筛选保管人"></el-input>
      <el-input v-model="filter.storageLocation" placeholder="筛选存放地点"></el-input>
      <!-- <el-input v-model="filter.createTime" placeholder="筛选创建时间"></el-input> -->
      <!-- <el-button type="primary" @click="applyFilter">应用筛选</el-button>
      <el-button @click="clearFilter">清除筛选</el-button> -->
    </div>

    <el-table
      v-loading="listLoading"
      :data="filteredList"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column label="标签编号" align="center">
        <template slot-scope="scope">
          {{ scope.row.labelNo }}
        </template>
      </el-table-column>

      <el-table-column label="资产名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.assetName }}
        </template>
      </el-table-column>

      <el-table-column label="资产编号" align="center">
        <template slot-scope="scope">
          {{ scope.row.assetNumber }}
        </template>
      </el-table-column>

      <el-table-column label="申请单位" align="center">
        <template slot-scope="scope">
          {{ scope.row.applicationUnit }}
        </template>
      </el-table-column>

      <el-table-column label="保管人" align="center">
        <template slot-scope="scope">
          {{ scope.row.custodian }}
        </template>
      </el-table-column>

      <el-table-column label="存放地点" align="center">
        <template slot-scope="scope">
          {{ scope.row.storageLocation }}
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" width="180">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="230">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleView(scope.row.id)"
          >查看</el-button>
          <el-button
            size="mini"
            type="success"
            @click="handleEdit(scope.row.id)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getFixedAssetLabelList, deleteFixedAssetLabel } from '@/api/fixedAssetLabel'
import Pagination from '@/components/Pagination'

export default {
  name: 'FixedAssetLabelList',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 10
      },
      filter: {
        labelNo: '',
        assetName: '',
        assetNumber: '',
        applicationUnit: '',
        custodian: '',
        storageLocation: '',
        createTime: ''
      }
    }
  },
  computed: {
    filteredList() {
      if (!this.list) return [];
      return this.list.filter(item => {
        return (
          item.labelNo.includes(this.filter.labelNo) &&
          item.assetName.includes(this.filter.assetName) &&
          item.assetNumber.includes(this.filter.assetNumber) &&
          item.applicationUnit.includes(this.filter.applicationUnit) &&
          item.custodian.includes(this.filter.custodian) &&
          item.storageLocation.includes(this.filter.storageLocation) &&
          item.createTime.includes(this.filter.createTime)
        );
      });
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listLoading = true
      try {
        const response = await getFixedAssetLabelList(this.listQuery)
        this.list = response.data.records
        this.total = response.data.total
      } catch (error) {
        console.error('获取列表失败:', error)
        this.$message.error('获取列表失败')
      }
      this.listLoading = false
    },
    handleAdd() {
      this.$router.push('/main/xingzheng/gdzichanbq/gdzichanbq')
    },
    handleView(id) {
      this.$router.push(`/main/xingzheng/gdzichanbq/gdzichanbq?id=${id}&type=view`)
    },
    handleEdit(id) {
      this.$router.push(`/main/xingzheng/gdzichanbq/gdzichanbq?id=${id}&type=edit`)
    },
    handleDelete(id) {
      this.$confirm('确认删除该记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await deleteFixedAssetLabel(id)
          this.$message.success('删除成功')
          this.getList()
        } catch (error) {
          console.error('删除失败:', error)
          this.$message.error('删除失败')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    applyFilter() {
      // 应用筛选逻辑
    },
    clearFilter() {
      // 清空筛选条件
      this.filter = {
        labelNo: '',
        assetName: '',
        assetNumber: '',
        applicationUnit: '',
        custodian: '',
        storageLocation: '',
        createTime: ''
      };
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
  display: flex;
  margin-left: -10px;
}

.filter-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.el-input {
  flex: 1;
  min-width: 150px;
}
</style>